<!-- 部门树 -->
<template>
	
	<div class="pane">
		<div class="head" style="padding-right: 8px;">
			<span>部门列表</span>
			<div style="flex: 1;"></div>
<!-- 			<el-button type="primary" @click="handleAdd" size="small">
				<el-icon><Plus /></el-icon>新增部门
			</el-button> -->
		</div>
		<div class="body">
			<div class="search-bar">
				<el-input
					v-model="keywords"
					placeholder="输入部门名称搜索"
					clearable
					@keyup.enter="handleSearch"
				>
					<template #append>
						<el-button icon="Search" @click="handleSearch" />
					</template>
				</el-input>
			</div>

			<el-tree
				ref="treeRef"
				v-loading="loading"
				:data="treeData"
				:props="{
					label: 'name',
					children: 'children'
				}"
				node-key="id"
				highlight-current
				:current-node-key="currentKey"
				:expand-on-click-node="false"
				:filter-node-method="filterNode"
				@node-click="handleNodeClick"
			>
				<template #default="{ node, data }">
					<div class="custom-tree-node">
						<span class="label">{{ data.name }}</span>
					</div>
				</template>
			</el-tree>
		</div>
	</div>
	
<!-- <el-card shadow="never">
	<template #header>
		<div class="card-header">
	        <span>部门</span>
		</div>
	</template>  
	

	
	
  </el-card> -->
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import type { TreeInstance } from 'element-plus';
import DeptAPI from "@/api/system/dept";
import {recurOptions} from "@/utils/TreeUtil";

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
});

const emits = defineEmits(["node-click", "update:modelValue"]);
const deptId = useVModel(props, "modelValue", emits);

const treeRef = ref<TreeInstance>();
const loading = ref(false);
const keywords = ref('');
const treeData = ref<any[]>([]);
const currentKey = ref('');

// 加载树数据
const loadTree = async () => {
  try {
    loading.value = true;
    const data = await DeptAPI.getOptions();
    treeData.value = recurOptions(data, '-1');
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  if (!treeRef.value) return;
  treeRef.value.filter(keywords.value);
};

// 过滤节点
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.name.toLowerCase().includes(value.toLowerCase());
};

// 监听搜索关键字变化
watch(keywords, (val) => {
  handleSearch();
});

/** 部门树节点 Click */
function handleNodeClick(data: { [key: string]: any }) {
  currentKey.value = data.id;
  deptId.value = data.id;
  emits("node-click",data);
}

// 监听 modelValue 变化
watch(() => props.modelValue, (val) => {
  if (val) {
    currentKey.value = val;
  }
}, { immediate: true });

onMounted(() => {
  loadTree();
});
</script>
<style lang="scss" scoped>
:deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  
  .custom-tree-node {
    .label {
      color: var(--el-color-primary);
      font-weight: bold;
    }
  }
}
</style>
